<template>
  <div class="left">
    <el-card shadow="hover">
      <template #header>
        <div class="css-2">关键词搜索</div>
      </template>
      <div class="main">
        <div class="charts">
          <div class="left-chart">
            <div class="title">搜索用户量</div>
            <div class="number">{{ number[0] }}</div>
            <div class="box">
              <v-chart :option="option1"></v-chart>
            </div>
          </div>
          <div class="right-chart">
            <div class="title">搜索量</div>
            <div class="number">{{ number[1] }}</div>
            <div class="box">
              <v-chart :option="option2"></v-chart>
            </div>
          </div>
        </div>
        <div class="table">
          <el-table :data="tableData" style="width: 100%">
            <el-table-column prop="rank" label="排名" width="60">
            </el-table-column>
            <el-table-column
              prop="keyWord"
              label="关键词"
              width="240"
              align="center"
            >
            </el-table-column>
            <el-table-column
              prop="totalSearch"
              label="总搜索量"
              align="center"
              width="240"
            >
            </el-table-column>
            <el-table-column
              prop="totalUser"
              label="搜索用户数"
              align="center"
              width="240"
            >
            </el-table-column>
          </el-table>
          <el-pagination
            background
            layout="prev, pager, next"
            :total="4"
            :page-size="1"
            @current-change="handleCurrentChange"
          >
          </el-pagination>
        </div>
      </div>
    </el-card>
  </div>
</template>

<script>
import { getKeywordData } from "@/api/index";
export default {
  data() {
    return {
      keywordData: {},
      index: 1,
      number: [],
      option1: {},
      option2: {},
    };
  },
  methods: {
    handleCurrentChange(value) {
      this.index = value;
    },
    renderChart(data) {
      const option = {
        xAxis: {
          type: "category",
          show: false,
        },
        yAxis: {
          show: false,
          type: "value",
        },
        grid: {
          top: 0,
          left: 0,
          right: 0,
          bottom: 0,
        },
        series: [
          {
            type: "line",
            data: data,
            itemStyle: {
              opacity: 0,
            },
            areaStyle: {
              color: "rgb(171, 221, 241)",
            },
            smooth: true,
          },
        ],
      };
      return option;
    },
  },
  computed: {
    tableData() {
      let data = Array.from(this.keywordData);
      data = data.slice((this.index - 1) * 6, 6 * this.index);
      return data;
    },
  },
  watch: {
    keywordData(newValue) {
      this.option1 = this.renderChart(
        newValue
          .map((item) => item.totalUser)
          .slice(0, 10)
          .reverse()
      );
      this.option2 = this.renderChart(
        newValue
          .map((item) => item.totalSearch)
          .slice(0, 10)
          .reverse()
      );
      this.number = [
        newValue.reduce((acc, cur) => acc + cur.totalUser, 0),
        newValue.reduce((acc, cur) => acc + cur.totalSearch, 0),
      ];
    },
  },
  async mounted() {
    const res = await getKeywordData();
    this.keywordData = res.data;
  },
};
</script>

<style lang="scss" scoped>
.left {
  flex: 1;
  .el-card {
    box-shadow: none;
    .css-2 {
      font-weight: 600;
    }
    .main {
      padding: 20px;
      .box {
        position: relative;
        width: 379px;
        height: 50px;
        padding: 0px;
        margin: 0px;
        border-width: 0px;
        cursor: pointer;
      }
      .charts {
        display: flex;
        gap: 20px;
        & > div {
          flex: 1;
          .title {
            font-size: 14px;
            color: #727171;
          }
          .number {
            font-size: 20px;
            font-weight: 600;
            margin-top: 10px;
          }
        }
      }
      .table {
        .el-pagination {
          white-space: nowrap;
          padding: 2px 5px;
          color: #303133;
          font-weight: 700;
          margin-top: 16px;
          display: flex;
          justify-content: flex-end;
        }
      }
    }
  }
}
</style>
